<template>
    <div class="container">
        <HeaderBar
            current="recommend"
        />
        <div class="container_main">
            <div class="recommend_view">
                <div class="recommend_view_title">热门推荐</div>
                <div class="recommend_view_list">
                    <div
                        class="recommend_view_list_item"
                        v-for="item in list"
                        :key="item.id"
                        @click="godetail(item.id)"
                    >
                        <img
                            :src="item.pic"
                            class="recommend_view_list_item_pic"
                        />
                        <div class="recommend_view_list_item_desc">{{item.desc}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    GetRecommendList
} from '@api/api'
import HeaderBar from '@components/HeaderBar';
export default {
    components: {
        HeaderBar,
    },
    data() {
        return {
            list: [],
            pageNo: 1,
            pageSize: 10,
            totalCount: null,
            totalPage: null
        }
    },
    created () {
        this.getList();
    },
    methods: {
        getList() {
            let {
                pageNo,
                pageSize
            } = this;
            let params = {
                pageNo,
                pageSize
            }
            GetRecommendList(params)
                .then(res=>{
                    console.log('res', res);
                    this.totalCount = res.totalCount;
                    this.totalPage = res.totalPage;
                    this.list = res.data;
                });
        },
        godetail(id) {
            this.$router.push({path: `/recommend/${id}`})
        }
    }
}
</script>
<style>
body {
    background: #fff;
}
</style>
<style scoped>
@import './index.css';
</style>